import React, { FC, useRef, useState, useEffect, createRef } from 'react';
import { Button } from 'antd-mobile'

// useRef变化不会主动使页面渲染
/**
 * 1. 这个ref对象只有一个current属性，你把一个东西保存在内，它的地址一直不会变。
 * 2. useRef变化不会主动使页面渲染,说明current属性的值发生变化，不会跟useState或者useReducer一样触发页面变化。
 *
 * 3. 组件上使用ref需要fowardRef ，
 * 4. useRefbenign直接在子组件上使用，直接使用拿不到子组件的dom.需要配合fowardRef；
 *
 */



const TestButton = React.forwardRef((props, ref:any) => {
  return <button ref={ref} className="FancyButton">
  {props.children}
</button>
})

class MyFoo extends React.Component {
  handleFouceChange() {
    console.log('click---我是MyFOO组件执行')
  }
  render() {
    return <div>
      MyFoo
    </div>
  }
}


class MyClass extends React.Component {
  ref:any
  constructor(props:any) {
    super(props)
    this.ref = React.createRef();
  }

  componentDidMount() {
    console.log(this.ref.current.handleFouceChange(), 'this-----------ref')
  }

  render() {
    return <div>

      <h1>MyClass</h1>
      <MyFoo ref={this.ref}/>

      {/* <TestButton ref={this.ref}/> */}
    </div>
  }
}



const Register:FC = (props) => {

  const count = useRef(0);
  const [n, setN] = useState(0);

  const handleClick = () => {
    count.current += 1;
    console.log(`r.current:${count.current}`);
    setN(Date.now())
    // setN(n => n + 1)
  }

  useEffect(() => {
    // console.log('useEff-n:', n)
  }, [n])

  useEffect(() => {
    count.current += 1;
    console.log('count:----useEff:', count)
    // if (count.current > 1) {
    //   console.log("r.current:" + count.current);
    //   console.log("n:" + n);
    // }
  }, [count.current])

  return <div>Register

    MyClass: <MyClass />

    <h1>{count.current}</h1>

  <Button style={{width:100}} size="small" type="primary"
  onClick={handleClick}>按钮</Button>
  </div>
}

export default Register;

